<template>
  <div class="app">
    <myNavbar title="订单确认"></myNavbar>
    <div>
      <div class="complete_box">
        <image class="complete_img" src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/wallet-income.png"></image>
        <text class="complete_title">支付成功</text>
        <div class="complete_price" v-if="order_Details.subPoint>0">
          <text class="complete_price_subtitle">兑换券</text>
          <text class="complete_price_title">{{ order_Details.subPoint  | number }}</text>
        </div>
        <div class="complete_price" v-else>
          <text class="complete_price_subtitle">¥</text>
          <text class="complete_price_title">{{ order_Details.amountPayable }}</text>
        </div>
      </div>
    </div>
    <div class="complete_botton">
      <div class="complete_botton_left" @click="indexClick">
        <text class="complete_botton_title botton_Fz_Color">返回首页</text>
      </div>
      <div class="complete_botton_right botton_Bg_Color" @click="detailsClick">
        <text class="complete_botton_title botton_Fz_Color">订单详情</text>
      </div>
    </div>
  </div>
</template>

<script>
const navigator = app.requireModule('navigator');
import myNavbar from '../../../components/myNavbar/myNavbar.vue';

const modal = weex.requireModule('modal')
export default {
  data() {
    return {
      order_Details: {},
      orderId: ''
    }
  },
  created() {
    console.log(app.config.params)
    this.order_Details = JSON.parse(app.config.params.data);
    this.order_Details.amountPayable = this.order_Details.amountPayable
    this.orderId = app.config.params.id
  },
  components: {
    myNavbar
  },
  methods: {
    indexClick() {
      // storage.removeItem('order', event => {
      // })
      eeui.openPage({
        url: 'root://pages/index.js',
        "swipeBack": false,
        statusBarType: 'immersion',
        statusBarStyle: false
      })
    },
    detailsClick() {
      if(this.order_Details.auctionId !=null){
        // console.log("11111111111111111111111")
        eeui.openPage({
          url: 'root://pages/member/transferSystem/merchantOrder.js',
          statusBarType: 'immersion',
          statusBarStyle: false
        })
      }else {
        console.log("22222222222222222222222222")
        eeui.openPage({
          url: 'root://pages/member/order/details.js',
          "pageName": "componentsOrder",
          params: this.orderId,
          statusBarType: 'immersion',
          statusBarStyle: false
        })
      }

    }
  }
}
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
.app {
  flex: 1;
}

.complete_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.complete_img {
  width: 154px;
  height: 154px;
  background-image: linear-gradient(to bottom, rgba(236, 95, 88, 1), rgba(255, 230, 230, 1));
  border-radius: 100px;
  margin-top: 100px;
}

.complete_title {
  font-size: 32px;
  font-weight: 500;
  color: rgba(26, 26, 30, 1);
  line-height: 42px;
  display: block;
  margin-top: 40px;
}

.complete_price {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 160px;
}

.complete_price_subtitle {
  font-size: 36px;
  font-weight: 500;
  color: rgba(231, 91, 83, 1);
  height: 60px;
  line-height: 76px
}

.complete_price_title {
  font-size: 60px;
  font-weight: 500;
  color: rgba(231, 91, 83, 1);
}

.complete_botton {
  position: absolute;
  bottom: 360px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 70px;
  padding-right: 70px;
  box-sizing: border-box;
  width: 750px;
  left: 0;
}

.complete_botton_left {
  width: 282px;
  height: 74px;
  background-image: linear-gradient(to bottom, rgba(196, 198, 204, 1), rgba(213, 215, 219, 1));
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center
}

.complete_botton_right {
  width: 282px;
  height: 74px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center
}

.complete_botton_title {
  font-size: 32px;
  font-weight: 400;
}

.tabbar {
  flex: 1;
  width: 750px;
}

.navbar {
  width: 750px;
  height: 100px;
}

.text {
  font-size: 26px;
}
</style>
